import React from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import styles from './css/Mytab.module.css'
import { useNavigate } from 'react-router-dom'
const Mytab = () => {
   const nav=useNavigate()
    const tabs = [
        {
            key: 'home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: 'opro',
            title: '抢票',
            icon: <UnorderedListOutline />,
        },
        {
            key: 'status',
            title: '学生核票',
            icon: (active) =>
                active ? <MessageFill /> : <MessageOutline />,
        },
        {
            key: 'my',
            title: '我的订单',
            icon: <UserOutline />,
        },
    ]
    return (
        <div className={styles.c}>
            <TabBar
                onChange={(key)=>{
                    nav(key)
                }}
            >
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}

export default Mytab
